<template>
  <view class="searchDetail">
    <view class="title flex">尾程单号：{{resData.delivery_id?resData.delivery_id:'暂未发货'}}
		<image v-if="resData.delivery_id" @click="$utils.copyMessage(resData.delivery_id)" src="@/static/icon/copy-icon.png" class="copy-btn" mode="aspectFill"></image>
	</view>
    <view class="box">
	   <view class=" box1">
		  <view class="name">物流轨迹</view>
		  <view class="steps" v-if="resData.wuliuguiji&&resData.wuliuguiji.status&&resData.wuliuguiji.status.length">
			<u-steps
			  current="3"
			  direction="column"
			  activeColor="#2354E3"
			  inactiveColor="#2354E3"
			  :inactiveIcon="inactiveIcon"
			  :activeIcon="activeIcon"
			>
			  <u-steps-item v-for="(item, index) in resData.wuliuguiji.status" :key="index">
				<view class="item" slot="desc">
				  <view class="time">{{resData.wuliuguiji.timestamp&&resData.wuliuguiji.timestamp[index]||''}}</view>
				  <view class="step">{{item}}</view>
				</view>
			  </u-steps-item>
			</u-steps>
		  </view>
			<view class="empty" v-else>
				未查询到物流轨迹
			</view>
	  </view>
      <view class="name">追踪信息</view>
      <view class="steps">
        <u-steps
          current="3"
          direction="column"
          activeColor="#2354E3"
          inactiveColor="#2354E3"
          :inactiveIcon="inactiveIcon"
          :activeIcon="activeIcon"
        >
          <u-steps-item v-for="(item, index) in stepList" :key="index">
            <view class="item" slot="desc">
              <view class="time">{{ item.time }}</view>
              <view class="step">{{ item.step }}</view>
			  <view v-if="resData.a_deal_time && item.step=='运单美国发货成功'">{{ resData.remark||'' }}</view>
            </view>
          </u-steps-item>
        </u-steps>
      </view>
	  <view class=" box1">
	    <view class="name">物流信息</view>
	    <view class="steps" v-if="stepList1 && stepList1.length">
	      <u-steps
	        current="3"
	        direction="column"
	        activeColor="#2354E3"
	        inactiveColor="#2354E3"
	        :inactiveIcon="inactiveIcon"
	        :activeIcon="activeIcon"
	      >
	        <u-steps-item v-for="(item, index) in stepList1" :key="index">
	          <view class="item" slot="desc">
	            <view class="time">{{timeFormat(item.time_iso)}}</view>
	            <view class="step">{{item.location||''}}{{item.location?',':''}}{{ item.description }}</view>
	          </view>
	        </u-steps-item>
	      </u-steps>
	    </view>
		<view class="empty" v-else>
			未查询到物流信息
		</view>
	  </view>
    </view>
	<view class="kefu">
	  <view class="kbox" @click="$uniApi.to('/pages/my/about')">
	    <image :src="icon?icon:'/static/icon/kefu.png'" mode="aspectFill" />
	  </view>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      stepList: [],
	  stepList1: [],
      activeIcon: "/static/icon/activation.png",
      inactiveIcon: "/static/icon/activation.png",
	  id:'',
	  resData:'',
	  icon:''
    };
  },

  onLoad(optipns) {
	  if(optipns.id || optipns.title){
		  this.id = optipns.id || optipns.title;
		  let reqData = {};
		  if(optipns.id){
			  reqData.id = optipns.id;
		  }
		  if(optipns.title){
		  	reqData.title = optipns.title;
		  }
		  // 获取物流信息
		  this.$api.post({
		      url: "/ebapi/public_api/deliver_trace",
		      data:reqData,
		     success: (res) => {
				 this.resData = res;
				 if(this.resData.delivery_id){
					 this.getTrack();
				 }
				 console.log(res,"zz",this.resData,"this.resData")
				 if(res['add_time']){
					 this.stepList.push(
					 {
					   time: res['add_time'],
					   step: "运单创建成功",
					 })
				 }
				 if(res['deal_time']){
					 this.stepList.push(
					 {
					   time: res['deal_time'],
					   step: "运单处理成功",
					 })
				 }
				 if(res['pay_time']){
					 this.stepList.push(
					 {
					   time: res['pay_time'],
					   step: "等待快递提取",
					 })
				 }
				 // if(res['deliver_time']){
					//  this.stepList.push(
					//  {
					//    time: res['deliver_time'],
					//    step: "运单发货成功",
					//  })
				 // }
				 // if(res['a_warehousing_time']){
					//  this.stepList.push(
					//  {
					//    time: res['a_warehousing_time'],
					//    step: "运单美国入库成功",
					//  })
				 // }
				 // if(res['a_deal_time']){
					//  this.stepList.push(
					//  {
					//    time: res['a_deal_time'],
					//    step: "运单美国发货成功",
					//  })
				 // }
				 if(res['sign_time']){
					 this.stepList.push(
					 {
					   time: res['sign_time'],
					   step: "签收成功",
					 })
				 }
				 // for (let key in res) {
				 // 	switch (key){
				 // 		case 'add_time':
					// 		if(res[key]){
					// 			this.stepList.push(
					// 			{
					// 			  time: res[key],
					// 			  step: "运单创建成功",
					// 			})
					// 		}
				 // 			break;
					// 	case 'deal_time':
					// 		if(res[key]){
					// 			this.stepList.push(
					// 			{
					// 			  time: res[key],
					// 			  step: "运单处理成功",
					// 			})
					// 		}
					// 		break;
					// 	case 'pay_time':
					// 		if(res[key]){
					// 			this.stepList.push(
					// 			{
					// 			  time: res[key],
					// 			  step: "运单支付成功",
					// 			})
					// 		}
					// 		break;
					// 	case 'deliver_time':
					// 		if(res[key]){
					// 			this.stepList.push(
					// 			{
					// 			  time: res[key],
					// 			  step: "运单发货成功",
					// 			})
					// 		}
					// 		break;
					// 	case 'a_warehousing_time':
					// 		if(res[key]){
					// 			this.stepList.push(
					// 			{
					// 			  time: res[key],
					// 			  step: "运单美国入库成功",
					// 			})
					// 		}
					// 		break;
					// 	case 'a_deal_time':
					// 		if(res[key]){
					// 			this.stepList.push(
					// 			{
					// 			  time: res[key],
					// 			  step: "运单美国发货成功",
					// 			})
					// 		}
					// 		break;
					// 	case 'sign_time':
					// 		if(res[key]){
					// 			this.stepList.push(
					// 			{
					// 			  time: res[key],
					// 			  step: "签收成功",
					// 			})
					// 		}
					// 		break;
				 // 		default:
				 // 			break;
				 // 	}
				 // }
		  	  // this.stepList = res;
		     },
		  }) 
	  }
	  this.getIcon()
  },

  methods: {
	  // 获取联系手机号
	  getIcon() {
	  	this.$api.post({
	  		url: "/ebapi/public_api/connection",
	  		data: {},
	  		success: (res) => {
	  			this.icon = res.icon;
	  		},
	  	})
	  },
	  timeFormat(time){
	  		  let times = time.replace(/T/g,' ');
	  		  let index = time.lastIndexOf('-');
	  		  let index1 = time.lastIndexOf('+');
	  		  let sureIndex;
	  		  if(index1>index){
	  			  sureIndex = index1;
	  		  }else{
	  			  sureIndex = index;
	  		  }
	  		  return times.substr(0,sureIndex);
	  },
	  getTrack(){
		  console.log(this.resData.delivery_id,"this.id 物流id");
		this.$api.post({
		      url: "/ebapi/public_api/track",
		      data:{
				  number:this.resData.delivery_id
			  },
			  success: (resData) => {
				  console.log(resData,"物流信息")
				  if(resData.data && resData.data.accepted && resData.data.accepted[0] && resData.data.accepted[0].track_info && resData.data.accepted[0].track_info.tracking && resData.data.accepted[0].track_info.tracking.providers && resData.data.accepted[0].track_info.tracking.providers[0] && resData.data.accepted[0].track_info.tracking.providers[0].events){
					this.stepList1 = resData.data.accepted[0].track_info.tracking.providers[0].events;
					// uni.hideLoading();
					console.log(this.stepList1,"stepList")
				  }
			  },
		})
	  }
  },
};
</script>

<style lang="scss">
.searchDetail {
  font-size: $uni-text-size-title;

  .title {
    width: 702rpx;
    height: 100rpx;
    line-height: 100rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
    border-radius: 8rpx;
    opacity: 1;
    margin: 40rpx 0 35rpx;
    padding-left: 45rpx;
  }
	
  .box {
    width: 702rpx;
    min-height: 1155rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    opacity: 1;
    padding: 35rpx 45rpx;

    .name {
      color: #666666;
    }

    .steps {
      margin: 60rpx 110rpx;

      .item {
        font-size: $uni-text-size-title;
        font-weight: bold;
		padding-bottom: 140rpx;

        .time {
          color: $uni-color-main;
        }

        .step {
          color: #333333;
        }
      }
    }
  }
  .box1{
  	.steps{
  		.item{
  			padding-bottom: 60rpx;
  		}
  	}
  }
  .kefu {
    display: flex;
    justify-content: flex-end;
    margin: 30rpx;
  	position: fixed; top: 80%; right: 0;
    .kbox {
      width: 92rpx;
      height: 92rpx;
      position: sticky;
      bottom: 30rpx;
	  image{
		  width: 100%; height: 100%;
	  }
    }
  }
}
</style>
